<template>
    <div class="theme-config">
      <el-drawer
        title="主题设置"
        :visible.sync="visible"
        direction="rtl"
        size="300px"
      >
        <div class="drawer-content">
          <!-- 主题色设置 -->
          <div class="config-section">
            <h3>主题色</h3>
            <el-color-picker
              v-model="themeColor"
              :predefine="predefineColors"
              @change="handleThemeChange"
            />
          </div>
  
          <!-- 导航栏设置 -->
          <div class="config-section">
            <h3>导航栏模式</h3>
            <el-radio-group v-model="navMode" @change="handleNavModeChange">
              <el-radio-button label="side">侧边模式</el-radio-button>
              <el-radio-button label="top">顶部模式</el-radio-button>
            </el-radio-group>
          </div>
  
          <!-- 菜单样式 -->
          <div class="config-section">
            <h3>菜单样式</h3>
            <el-switch
              v-model="darkMenu"
              active-text="深色菜单"
              inactive-text="浅色菜单"
              @change="handleMenuStyleChange"
            />
          </div>
  
          <!-- 标签页显示 -->
          <div class="config-section">
            <h3>标签页</h3>
            <el-switch
              v-model="showTags"
              active-text="显示"
              inactive-text="隐藏"
              @change="handleTagsViewChange"
            />
          </div>
  
          <!-- 内容区域 -->
          <div class="config-section">
            <h3>内容区域</h3>
            <el-radio-group v-model="contentWidth" @change="handleContentWidthChange">
              <el-radio-button label="fluid">流式</el-radio-button>
              <el-radio-button label="fixed">定宽</el-radio-button>
            </el-radio-group>
          </div>
  
          <!-- 字体大小 -->
          <div class="config-section">
            <h3>字体大小</h3>
            <el-slider
              v-model="fontSize"
              :min="12"
              :max="18"
              :step="1"
              @change="handleFontSizeChange"
            />
          </div>
  
          <!-- 界面动画 -->
          <div class="config-section">
            <h3>界面动画</h3>
            <el-switch
              v-model="enableAnimation"
              active-text="开启"
              inactive-text="关闭"
              @change="handleAnimationChange"
            />
          </div>
  
          <!-- 操作按钮 -->
          <div class="config-section">
            <el-button type="primary" @click="saveConfig">保存配置</el-button>
            <el-button @click="resetConfig">恢复默认</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ThemeConfig',
    data() {
      return {
        visible: false,
        themeColor: '#409EFF',
        predefineColors: [
          '#409EFF',
          '#1890ff',
          '#304156',
          '#212121',
          '#11a983',
          '#13c2c2',
          '#6959CD',
          '#f5222d'
        ],
        navMode: 'side',
        darkMenu: true,
        showTags: true,
        contentWidth: 'fluid',
        fontSize: 14,
        enableAnimation: true
      }
    },
    methods: {
      // 显示配置面板
      show() {
        this.visible = true
      },
      // 主题色变更
      handleThemeChange(color) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'theme',
          value: color
        })
        // 更新样式变量
        this.updateStyle(color)
      },
      // 导航模式变更
      handleNavModeChange(mode) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'navMode',
          value: mode
        })
      },
      // 菜单样式变更
      handleMenuStyleChange(isDark) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'menuTheme',
          value: isDark ? 'dark' : 'light'
        })
      },
      // 标签页显示变更
      handleTagsViewChange(show) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'tagsView',
          value: show
        })
      },
      // 内容区域宽度变更
      handleContentWidthChange(width) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'contentWidth',
          value: width
        })
      },
      // 字体大小变更
      handleFontSizeChange(size) {
        document.documentElement.style.fontSize = size + 'px'
        this.$store.dispatch('settings/changeSetting', {
          key: 'fontSize',
          value: size
        })
      },
      // 动画开关变更
      handleAnimationChange(enable) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'enableAnimation',
          value: enable
        })
      },
      // 更新样式变量
      updateStyle(primary) {
        const style = document.createElement('style')
        style.innerHTML = `
          :root {
            --primary-color: ${primary};
            --primary-light: ${this.lighten(primary, 20)};
            --primary-dark: ${this.darken(primary, 20)};
          }
        `
        document.head.appendChild(style)
      },
      // 颜色处理函数
      lighten(color, amount) {
        return color // 实际项目中需要实现颜色处理逻辑
      },
      darken(color, amount) {
        return color // 实际项目中需要实现颜色处理逻辑
      },
      // 保存配置
      saveConfig() {
        // 保存到本地存储
        const config = {
          theme: this.themeColor,
          navMode: this.navMode,
          darkMenu: this.darkMenu,
          showTags: this.showTags,
          contentWidth: this.contentWidth,
          fontSize: this.fontSize,
          enableAnimation: this.enableAnimation
        }
        localStorage.setItem('themeConfig', JSON.stringify(config))
        this.$message.success('配置已保存')
      },
      // 重置配置
      resetConfig() {
        this.themeColor = '#409EFF'
        this.navMode = 'side'
        this.darkMenu = true
        this.showTags = true
        this.contentWidth = 'fluid'
        this.fontSize = 14
        this.enableAnimation = true
        this.handleThemeChange(this.themeColor)
        this.$message.success('已恢复默认配置')
      }
    },
    created() {
      // 加载保存的配置
      const savedConfig = localStorage.getItem('themeConfig')
      if (savedConfig) {
        const config = JSON.parse(savedConfig)
        Object.assign(this, config)
        this.handleThemeChange(this.themeColor)
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .theme-config {
    .drawer-content {
      padding: 20px;
    }
    
    .config-section {
      margin-bottom: 24px;
      
      h3 {
        margin-bottom: 12px;
        font-size: 14px;
        color: #606266;
      }
      
      .el-radio-group {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
      
      .el-color-picker {
        width: 100%;
      }
      
      .el-slider {
        margin-top: 10px;
      }
    }
  }
  </style>